<template>
  <s-layout title="退款详情">
    <view class="wrapepr">
			<view class="refund-card">
				<!-- 步骤条 -->
				<!-- TODO-jj: 步骤条样式 -->
				<view class="steps-box ss-flex">
				  <!-- <uni-steps :options="state.list" :active="state.active" active-color="#fff" /> -->
				  <view class="ss-flex">
				    <view class="steps-item">
				      <view class="ss-flex">
				        <text class="sicon-circlecheck activity-color"></text>
				        <view class="line activity-bg"></view>
				      </view>
							<view class="steps-item-title activity-color">提交申请</view>
							<view class="steps-item-time">01-01 22:01</view>
				    </view>
						<view class="steps-item">
						  <view class="ss-flex">
						    <text class="sicon-circlecheck activity-color"></text>
						    <view class="line info-bg"></view>
						  </view>
							<view class="steps-item-title activity-color">平台处理</view>
							<view class="steps-item-time">剩23小时56分</view>
						</view>
						<view class="steps-item">
						  <view class="ss-flex">
						    <text class="sicon-circlecheck info-color"></text>
						  </view>
							<view class="steps-item-title info-color">退款完成</view>
							<view class="steps-item-time">01-01 22:01</view>
						</view>
				  </view>
				</view>
				<view class="card-foot">平台已同意您的退款申请，已退款至您的余额账户</view>
			</view>
			<!-- 退款信息 -->
			<view class="refund-card">
				<view class="card-title">退款信息</view>
				<view class="refund-info">
					<img class="order-img" src="../../assets/logo.png" /></img>
					<view class="order-info">
						<view class="order-name">红旗E001</view>
						<view class="order-color">灰色</view>
						<view class="order-price">￥123456</view>
					</view>
				</view>
			</view>
			
			<view class="refund-card">
				<view class="refund-content">
					<view class="card-left">退款编号</view>
					<view class="card-right">123456768</view>
				</view>
				<view class="refund-content">
					<view class="card-left">货物状态</view>
					<view class="card-right">未取车</view>
				</view>
				<view class="refund-content">
					<view class="card-left">退款原因</view>
					<view class="card-right">超过一年排队取车未取到</view>
				</view>
				<view class="refund-content">
					<view class="card-left">退款金额</view>
					<view class="card-right">￥23456</view>
				</view>
			</view>
    </view>
		<su-fixed bottom placeholder>
			<view class="foot-wrap">
				<view class="foot-box">
				  删除记录
				</view>
			</view>
		 
		</su-fixed>
  </s-layout>
</template>

<script setup>
  
</script>

<style lang="scss" scoped>
	.wrapepr{
		margin-top: 100rpx;
		padding: 0 30rpx;
	}
	// 卡片样式
	.refund-card{
		height: 280rpx;
		border-radius: 20rpx;
		background-color: #1E1E1E;
		margin-bottom: 22rpx;
		padding: 0 30rpx
	}
	// 卡片底部
	.card-foot{
		margin-bottom: 40rpx;
		font-size: 24rpx;
		color: #AEAEAE;
		text-align: center;
	}
  // 步骤条
  .steps-box {
    width: 100%;
    height: 200rpx;
    padding-left: 42rpx;

    .steps-item {
      .sicon-circleclose {
        font-size: 24rpx;
        color: #fff;
      }
      .sicon-circlecheck {
        font-size: 24rpx;
      }
      .steps-item-title {
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 16rpx;
        margin-left: -36rpx;
        width: 100rpx;
        text-align: center;
      }
			.steps-item-time{
				font-size: 24rpx;
				height: 24rpx;
				color: #868686;
				margin-top: 16rpx;
				margin-left: -50rpx;
			}
    }
  }
  .activity-color {
    color: #13C093;
  }
  .info-color {
    color: #868686;
  }
  .activity-bg {
    background: #13C093;
  }
  .info-bg {
    background: #868686;
  }

  .line {
    width: 240rpx;
    height: 4rpx;
  }
	//退款信息
  .card-title{
		color:#E4E4E4;
		font-size: 30rpx;
		padding: 34rpx 0 31rpx
	}
	.refund-info{
		display: flex;
		align-items: center;
	}
  .order-img{
		margin-right: 28rpx;
		border-radius:20rpx;
		width: 150rpx;
		height: 150rpx;
	}
	.order-info{
		font-size: 32rpx;
		color: #E4E4E4;
		width: 320rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.order-color{
		font-size: 22rpx;
		color: #868686;
		margin: 22rpx 0
	}
	.order-price{
		color: #00A1FF;
	}
	.refund-content{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 0 0
	}
	.card-left{
		color: #868686;
		font-size: 24rpx;
	}
	.card-right{
		color: #EEEEEE;
		font-size: 24rpx;
	}
	.foot-wrap{
		display: flex;
		justify-content: right;
	}
	.foot-box{
		font-size: 32rpx;
		color: #FFFFFF;
		width:200rpx;
		height:75rpx;
		line-height:75rpx;
		text-align:center;
		border: 2rpx solid #ffffff;
		border-radius:37rpx;
		margin: 38rpx 30rpx 38rpx 0
	}
</style>
